<template>
  <div>
    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">
      <div v-loading="loading" id="main" style="width: 600px;height:600px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "UserAgeDiagram",
  data(){
    return{
      loading:false,
      option:{
        title: {
          text: '用户年龄分布图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '用户年龄',
            type: 'pie',
            radius: '50%',
            data: [
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  async mounted() {
    this.loading = true;
    let form = {
      token:window.sessionStorage.getItem("token")
    }
    const {data:res} = await this.$http.post('http://120.46.132.13:8081/api/dataInfo/getAgeScopeNum',form)
    this.loading = false;
    if(res.code===200||res.code===0){
      for(let i=0; i<res.data.length; ++i){
        let dataForm = {
          name:Object.keys(res.data[i])[0],
          value:res.data[i][Object.keys(res.data[i])[0]]
        }
        this.option.series[0].data.push(dataForm)
      }
    }else{
      this.$notify.error("获取用户报表数据失败")
    }

    this.drawChart()
  },
  methods:{
    drawChart() {
      //基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 绘制图表
      myChart.setOption(this.option);

    }
  }
}
</script>

<style scoped>

</style>
